import React from 'react';
import { PageHeader, Tabs, Button, Statistic, Descriptions } from 'antd';
const { TabPane } = Tabs;


const extraContent = (
  <div style={{ display: 'flex', width: 'max-content', justifyContent: 'flex-end', }} >
    <Statistic title="状态" value="等待中" style={{ marginRight: 32, }} />
    <Statistic title="价格" prefix="$" value={568.08} />
  </div>
)


const renderContent = (column = 3) => (
  <Descriptions size="small" column={column}>
    <Descriptions.Item label="Created">Lili Qu</Descriptions.Item>
    <Descriptions.Item label="Association"> <a>421421</a> </Descriptions.Item>
    <Descriptions.Item label="Creation Time">2017-01-10</Descriptions.Item>
    <Descriptions.Item label="Effective Time">2017-10-10</Descriptions.Item>
    <Descriptions.Item label="Remarks"> Gonghu Road, Xihu District, Hangzhou, Zhejiang, China </Descriptions.Item>
  </Descriptions>
)


const Content = ({ children, extra }) => {
  return (
    <div className="content">
      <div className="main">{children}</div>
      <div className="extra">{extra}</div>
    </div>
  );
};

export default class Responsiv extends React.Component{
  render(){
    return <>
          <PageHeader
          onBack={() => window.history.back()}
          title="Title"
          subTitle="This is a subtitle"
          extra={[ <Button key="3">Operation</Button>, <Button key="2">Operation</Button>, <Button key="1" type="primary"> Primary </Button>, ]}
          footer={
            <Tabs defaultActiveKey="2">
              <TabPane tab="Details" key="1" />
              <TabPane tab="Rule" key="2" />
            </Tabs>
          }
        >
          <Content extra={extraContent}>{renderContent()}</Content>
        </PageHeader>
    </>
  }
}













// API#
// 参数	                    说明	类型	默认值	版本
// title	                  自定义标题文字	ReactNode	-	3.14.0
// subTitle	                自定义的二级标题文字	ReactNode	-	3.14.0
// avatar	                  标题栏旁的头像	avatar props	-	3.22.0
// backIcon	                自定义 back icon ，如果为 false 不渲染 back icon	ReactNode	<Icon type="arrow-left" />	3.14.0
// tags	                    title 旁的 tag 列表	Tag[] | Tag	-	3.14.0
// extra	                  操作区，位于 title 行的行尾	ReactNode	-	3.14.0
// breadcrumb	              面包屑的配置	breadcrumb	-	3.14.0
// footer	                  PageHeader 的页脚，一般用于渲染 TabBar	ReactNode	-	3.14.0
// onBack	                  返回按钮的点击事件	()=>void	()=>history.back()	3.14.0
// 配置返回按钮时，breadcrumb 会自动隐藏。